import React, { useState, useEffect } from "react"
import { Modal } from "antd"
import { useTitle } from "ahooks"
import styles from "./Adv.module.scss"
import "antd/dist/reset.css" // Import Ant Design CSS

const images = import.meta.glob("../assets/adv/*.{png,jpg,jpeg,svg}", { eager: true })

const Adv: React.FC = () => {
  const [imageUrls, setImageUrls] = useState<string[]>([])
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [selectedImage, setSelectedImage] = useState<string | null>(null)

  // 使用 ahooks 的 useTitle 设置页面标题
  useTitle("结尾猫片更新啦")

  useEffect(() => {
    const urls = Object.values(images).map((img: any) => img.default)
    setImageUrls(urls)
  }, [])

  const handleImageClick = (src: string) => {
    setSelectedImage(src)
    setIsModalOpen(true)
  }

  const handleCancel = () => {
    setIsModalOpen(false)
    setSelectedImage(null)
  }

  return (
    <div className={styles["adv-page"]}>
      <h1 className={styles["adv-title"]}>个人推广，感谢支持</h1>
      <p className={styles["adv-text"]}>售卖GPT-4和Claude的镜像站兑换码，支持无限次沟通及语音通话，每月只需80元。需要的朋友请联系我v: yeahz233获取详情！</p>
      <div className={styles["image-grid"]}>
        {imageUrls.map((src, index) => (
          <div key={index} className={styles["image-item"]} onClick={() => handleImageClick(src)}>
            <img src={src} alt={`产品图${index + 1}`} />
          </div>
        ))}
      </div>

      {/* Modal for enlarged image */}
      <Modal
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
        centered
        bodyStyle={{ padding: 0 }} // 去掉默认内边距
        width="90vw" // modal宽度为视口的90%
        style={{ maxWidth: "90vw" }} // 限制最大宽度
      >
        {selectedImage && (
          <img
            src={selectedImage}
            alt="放大的产品图"
            style={{
              width: "100%", // 保证图片宽度适配
              maxHeight: "90vh", // 高度不超出屏幕
              objectFit: "contain", // 图片保持比例
            }}
          />
        )}
      </Modal>
    </div>
  )
}

export default Adv
